<template>
    <div class="goods">
        <ul>
            <li v-for="item in goodsList" :key="item.id" @click="gotoDetail(item)">
                <img :src="item.list_pic_url" alt="">
                <p>{{item.name}}</p>
                <span>{{item.retail_price | formatMoney}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['goodsList'],
    data() {
        return {}
    },
    components: {
    },
    watch: {},
    methods: {
        gotoDetail(item){
    //    console.log(item);
    this.$router.push({ path: "/productDetail", query: { id: item.id } });
        }
    },
    beforeCreate() { },
    created() { },
    beforeMount() { },
    mounted() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style scoped lang="less">
.goods{
    ul{
        display: flex;
        flex-wrap: wrap;
          justify-content: space-around;
    }
    li{
        width: 48%;
    }
    img{
        width: 100%;
        display: block;
    }
    span{
        color: red;
       display: block;
        text-align: center;
        font-size: 18px;
    }
    p{
        text-align: center;
        font-size: 16px;
        overflow: hidden;
        // 文本不会换行
        white-space: nowrap;
        // 文本溢出包含元素时 省略号表示
        text-overflow: ellipsis;
    }
}
</style>